<!-- subpkg_medicine/order_detail/index.vue -->
<script setup>
import { ref } from 'vue';
import { showOrderAPI } from '@/apis/doct';

  const props=defineProps({
		id:String
	})
	console.log(props.id);
	const orderDetail=ref({})
	// 获取药品订单详情
	const getshowOrder=()=>{
		showOrderAPI(props.id).then((res)=>{
			console.log('订单',res);
			orderDetail.value=res.data
		})
	}
	
	
	// 获取药品订单详情
	getshowOrder()
	
</script>

<template>
  <scroll-page background-color="#f6f6f6">
    <view class="medicine-page">
      <view class="page-header">
        <view class="order-status">
          <text class="label"> 药品订单 {{orderDetail.actualPayment}} 元 </text>
          <text class="status"> {{orderDetail.statusValue}} </text>
        </view>
        <view class="order-shippment">
          <template v-if="orderDetail.status==11">
            <view class="region">
              <text class="iconfont icon-location"></text>
              {{orderDetail.addressInfo.city}}-{{orderDetail.addressInfo.county}}
            </view>
            <view class="detail"> {{orderDetail.addressInfo.addressDetail}} </view>
            <view class="receiver"> 李富贵 {{orderDetail.addressInfo.mobile}}</view>
          </template>
		  
          <template v-if="orderDetail.status==12">
            <navigator hover-class="none" url=" ">
              <view class="marker">{{orderDetail.expressInfo.content}}</view>
              <view class="datetime">{{orderDetail.expressInfo.time}}</view>
              <view class="arrow">
                <uni-icons size="18" color="#C3C3C5" type="forward" />
              </view>
            </navigator>
          </template>
		  
        </view>
      </view>

      <view class="order-shop">
        优医药房
        <text class="alt"> 优医质保 假一赔十 </text>
      </view>
      <!-- 药品列表 -->
      <view class="medicine-list">
        <view class="medicine-list-item" v-for="item in orderDetail.medicines">
          <image
            class="medicine-cover"
            :src="item.avatar"
            mode="aspectFill"
          />
          <view class="medicine-info">
            <text class="name"> {{item.name}} </text>
            <text class="unit symbol">{{item.prescriptionFlag}} 盒 </text>
            <text class="price">¥{{item.amount}}</text>
          </view>
          <view class="quantity">x{{item.quantity}}</view>
          <view class="guide"> 用法用量：{{item.usageDosag}} </view>
        </view>
      </view>

      <!-- 订单信息 -->
      <view class="order-info">
        <uni-list :border="false">
          <uni-list-item title=" 药品金额 " :right-text="'¥'+orderDetail.payment" />
          <uni-list-item title=" 运费 " :right-text="'¥'+orderDetail.expressFee" />
          <uni-list-item title=" 优惠券 " show-arrow :right-text="'¥'+orderDetail.couponDeduction" />
          <uni-list-item title=" 实付款 " :right-text="'¥'+orderDetail.payment" />
          <uni-list-item title=" 订单编号 " :right-text="orderDetail.orderNo" />
          <uni-list-item title=" 创建时间 " :right-text="orderDetail.createTime"/>
          <uni-list-item title=" 支付方式 " :right-text="orderDetail.paymentMethod==1? '支付宝':'微信支付' " />
        </uni-list>
      </view>

      <view class="notice-bar">
        <uni-notice-bar text=" 请在 00:14:59 内完成支付，超时订单将取消 " />
      </view>

      <!-- 底部 -->
      <view class="toolbar">
        <template v-if="false">
          <view class="total-amount">
            需付款: <text class="number">¥39.00</text>
          </view>
          <view class="buttons">
            <button class="uni-button minor"> 取消问诊 </button>
            <button class="uni-button"> 立即支付 </button>
          </view>
        </template>
        <template v-else>
          <view class="buttons">
            <view class="delete-botton">
              <uni-icons size="24" color="#848484" type="trash" />
              <text> 删除订单 </text>
            </view>
            <button class="uni-button"> 再次购买 </button>
          </view>
        </template>
      </view>
    </view>
  </scroll-page>
</template>

<style lang="scss">
 // subpkg_medicine/order_detail/index.scss
 .medicine-page {
   padding-bottom: calc(env(safe-area-inset-bottom) + 155rpx);
 }
 
 .page-header {
   padding: 20rpx 30rpx 30rpx;
   // 需要一个高为 300 的背景图
   background-color: #eaf8f6;
   overflow: hidden;
 
   .order-status {
     display: flex;
     justify-content: space-between;
     line-height: 1;
     padding: 30rpx 0 0 6rpx;
     font-size: 32rpx;
 
     .label {
       color: #121826;
     }
 
     .status {
       color: #16c2a3;
     }
   }
 
   .order-shippment {
     line-height: 1;
     padding: 30rpx;
     background-color: #fff;
     border-radius: 20rpx;
     margin-top: 40rpx;
     position: relative;
 
     .region {
       display: flex;
       align-items: center;
       font-size: 26rpx;
       color: #6f6f6f;
     }
 
     .icon-location {
       color: #ff7702;
       font-size: 28rpx;
       margin-right: 5rpx;
     }
 
     .detail {
       margin: 24rpx 0;
       font-size: 34rpx;
       color: #121826;
     }
 
     .receiver {
       font-size: 26rpx;
       color: #121826;
     }
 
     .marker {
       font-size: 28rpx;
       color: #16c2a3;
     }
 
     .datetime {
       // margin-left: 10rpx;
       margin-top: 20rpx;
       font-size: 24rpx;
       color: #c3c3c5;
     }
 
     .arrow {
       position: absolute;
       top: 50%;
       right: 16rpx;
       transform: translateY(-50%);
     }
   }
 }
 
 .order-shop {
   padding: 20rpx 30rpx;
   margin: 10rpx 0;
   line-height: 1;
   font-size: 32rpx;
   color: #121826;
   font-weight: 500;
 
   .alt {
     font-size: 24rpx;
     color: #979797;
     margin-left: 10rpx;
   }
 }
 
 .medicine-list {
   padding: 0 30rpx;
   background-color: #fff;
 }
 
 .medicine-list-item {
   padding: 30rpx 0;
   border-bottom: 1rpx solid #ededed;
   position: relative;
 
   &:last-child {
     border-bottom: none;
   }
 
   .medicine-cover {
     width: 180rpx;
     height: 160rpx;
     float: left;
   }
 
   .medicine-info {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     height: 160rpx;
     padding-left: 20rpx;
 
     .name {
       font-size: 30rpx;
       font-weight: 500;
       color: #121826;
     }
 
     .unit {
       color: #979797;
       font-size: 28rpx;
       display: flex;
       align-items: center;
 
       @include text-overflow(1);
 
       &.symbol::before {
         content: ' 处方药 ';
         line-height: 1;
         padding: 8rpx 10rpx;
         margin-right: 10rpx;
         border-radius: 4rpx;
         font-size: 24rpx;
         color: #fff;
         background-color: #16c2a3;
       }
     }
 
     .price {
       color: #eb5757;
       font-size: 32rpx;
     }
   }
 
   .quantity {
     top: 30rpx;
     right: 0;
     position: absolute;
 
     font-size: 30rpx;
     color: #121826;
   }
 
   .guide {
     clear: both;
     padding: 20rpx;
     margin-top: 30rpx;
     font-size: 28rpx;
     color: #848484;
     border-radius: 10rpx;
     background-color: #f6f6f6;
   }
 }
 
 .order-info {
   padding: 0 30rpx;
   margin-top: 30rpx;
   background-color: #fff;
 
   .right-text {
     display: flex;
     align-items: center;
   }
 
   .copy {
     line-height: 1;
     padding: 6rpx 20rpx 4rpx;
     margin-right: 20rpx;
     font-size: 24rpx;
     color: #16c2a3;
     background-color: #fafafa;
     border-radius: 40rpx;
     border: 1rpx solid #16c2a3;
   }
 
   .number {
     font-size: 32rpx;
     color: #848484;
   }
 
   :deep(.uni-list-item__container) {
     padding-left: 0 !important;
     padding-right: 0 !important;
   }
 
   :deep(.uni-list-item__content-title) {
     font-size: 32rpx !important;
     color: #3c3e42 !important;
   }
 
   :deep(.uni-list-item__extra-text) {
     font-size: 32rpx !important;
     color: #848484 !important;
   }
 
   :deep(.uni-icon-wrapper) {
     padding: 0 !important;
     margin-right: -10rpx !important;
     font-size: 36rpx !important;
     margin-top: 2rpx;
   }
 }
 
 .notice-bar {
   text-align: center;
   margin-top: 30rpx;
   position: sticky;
   bottom: calc(env(safe-area-inset-bottom) + 145rpx);
 }
 
 .toolbar {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
 
   display: flex;
   align-items: center;
   height: 88rpx;
   padding: 30rpx 40rpx calc(env(safe-area-inset-bottom) + 30rpx);
   background-color: #fff;
 
   .buttons {
     flex: 1;
     display: flex;
   }
 
   .delete-botton {
     display: flex;
     flex-direction: column;
     color: #848484;
     text-align: center;
     font-size: 24rpx;
     margin: 0 60rpx 0 30rpx;
   }
 
   .uni-button {
     flex: 1;
     padding: 0 30rpx;
 
     &.minor {
       color: #16c2a3;
       margin-right: 20rpx;
       border: 1rpx solid #ededed;
       background-color: #fafafa;
     }
   }
 
   .total-amount {
     display: flex;
     align-items: center;
     width: 270rpx;
     font-size: 28rpx;
     color: #3c3e42;
   }
 
   .number {
     font-size: 40rpx;
     color: #eb5757;
     margin-left: 10rpx;
   }
 }
</style>